<template>
    <div class="appointment-list-page">
        <page-header title="我的预约" />
        <div class="page-content">
            <van-tabs v-model:active="activeTab" sticky>
                <van-tab title="全部">
                    <div v-if="filterAppointments('all').length > 0">
                        <appointment-card v-for="item in filterAppointments('all')" :key="item.id" :appointment="item"
                            @cancel="onCancelAppointment" />
                    </div>
                    <div v-else class="empty-state">
                        <van-empty image="search" description="暂无预约记录" />
                    </div>
                </van-tab>
                <van-tab title="待就诊">
                    <div v-if="filterAppointments('pending').length > 0">
                        <appointment-card v-for="item in filterAppointments('pending')" :key="item.id"
                            :appointment="item" @cancel="onCancelAppointment" />
                    </div>
                    <div v-else class="empty-state">
                        <van-empty image="search" description="暂无待就诊记录" />
                    </div>
                </van-tab>
                <van-tab title="已完成">
                    <div v-if="filterAppointments('completed').length > 0">
                        <appointment-card v-for="item in filterAppointments('completed')" :key="item.id"
                            :appointment="item" />
                    </div>
                    <div v-else class="empty-state">
                        <van-empty image="search" description="暂无已完成记录" />
                    </div>
                </van-tab>
                <van-tab title="已取消">
                    <div v-if="filterAppointments('cancelled').length > 0">
                        <appointment-card v-for="item in filterAppointments('cancelled')" :key="item.id"
                            :appointment="item" />
                    </div>
                    <div v-else class="empty-state">
                        <van-empty image="search" description="暂无已取消记录" />
                    </div>
                </van-tab>
            </van-tabs>
        </div>
        <!-- 取消预约确认弹窗 -->
        <van-dialog v-model:show="showCancelDialog" title="取消预约" confirm-button-text="确认取消" cancel-button-text="再想想"
            @confirm="confirmCancel">
            <div class="dialog-content">
                您确定要取消该预约吗？<br>
                <span class="dialog-warn">取消后将无法恢复，且可能会影响您的信用记录。</span>
            </div>
        </van-dialog>
    </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { showToast } from 'vant'
import PageHeader from '@/components/common/PageHeader.vue'
import AppointmentCard from './components/AppointmentCard.vue'

// 定义预约类型接口，与AppointmentCard组件保持一致
interface Appointment {
    id: number
    hospitalName: string
    departmentName: string
    doctorName: string
    doctorTitle: string
    patientName: string
    appointmentTime: string
    status: 'pending' | 'completed' | 'cancelled'
    fee: number
    orderNo: string
}

// 当前激活的标签页
const activeTab = ref(0)

// 模拟预约数据 - 使用正确的类型
const appointments = ref<Appointment[]>([
    {
        id: 1,
        hospitalName: '协和医院',
        departmentName: '心内科',
        doctorName: '张医生',
        doctorTitle: '主任医师',
        patientName: '张三',
        appointmentTime: '2023-05-20 09:00-10:00',
        status: 'pending', // 使用联合类型中的值
        fee: 30,
        orderNo: 'A202305200001'
    },
    {
        id: 2,
        hospitalName: '协和医院',
        departmentName: '骨科',
        doctorName: '李医生',
        doctorTitle: '副主任医师',
        patientName: '李四',
        appointmentTime: '2023-05-18 14:30-15:30',
        status: 'completed', // 使用联合类型中的值
        fee: 20,
        orderNo: 'A202305180002'
    },
    {
        id: 3,
        hospitalName: '协和医院',
        departmentName: '儿科',
        doctorName: '王医生',
        doctorTitle: '主治医师',
        patientName: '张三',
        appointmentTime: '2023-05-15 10:00-11:00',
        status: 'cancelled', // 使用联合类型中的值
        fee: 15,
        orderNo: 'A202305150003'
    }
])

// 根据状态筛选预约
const filterAppointments = (status: string) => {
    if (status === 'all') {
        return appointments.value
    }
    return appointments.value.filter(item => item.status === status)
}

// 取消预约相关
const showCancelDialog = ref(false)
const currentAppointmentId = ref<number>()

const onCancelAppointment = (id: number) => {
    currentAppointmentId.value = id
    showCancelDialog.value = true
}

const confirmCancel = () => {
    if (!currentAppointmentId.value) return

    // 在实际应用中，这里应该发送请求到API取消预约
    const index = appointments.value.findIndex(item => item.id === currentAppointmentId.value)
    if (index !== -1) {
        appointments.value[index].status = 'cancelled'
        showToast('预约已取消')
    }
}
</script>

<style scoped lang="scss">
.appointment-list-page {
    min-height: 100vh;
    background: #f5f5f5;
    padding-top: 46px; // 为顶部导航栏预留空间

    // .page-content {
    //     // Tabs已经有内置的padding
    // }

    .empty-state {
        padding: 40px 0;
    }

    .dialog-content {
        padding: 20px;
        text-align: center;
        line-height: 1.6;

        .dialog-warn {
            color: #ff525d;
            font-size: 13px;
        }
    }
}
</style>
